<template>
  <!-- <base-breadcrumb :title="$route.meta.title"> -->
  <div>
    <!-- 总包签证确认归档编辑 -->
    <a-form-model
      ref="ruleForm"
      :model="form"
      :label-col="{ span: 6 }"
    >
      <a-spin :spinning="loading">
        <!-- 表格 -->
        <a-card :bordered="false">
          <title-name title="节点信息"></title-name>
          <a-row>
            <a-col :span="8">
              <span>当前节点:{{form.taskName}}</span>
            </a-col>
            <a-col :span="8">
              <span>审批人：{{$userInfo().name}}</span>
            </a-col>
            <a-col :span="8">
              <span>审批时间：{{currentTime}}</span>
            </a-col>
          </a-row>
        </a-card>
        <a-card :bordered="false">
          <title-name title="待审批表单"></title-name>
          <a-table
            :pagination="false"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :columns="columns"
            :data-source="form.approvalPendingList"
            :scroll="{ x: 2000 }"
          >
            <span
              slot="serial"
              slot-scope="text, record, index"
            >{{ index + 1 }}</span>
            <template
              v-for="col in ['approvalOpinion']"
              :slot="col"
              slot-scope="text, record"
            >
              <div
                :key="col"
                :class="record.setCheck==true?'setCheck':''"
              >
                <template v-if="resolveInfo">
                  {{ record[col] }}
                </template>
                <a-input
                  v-else
                  :maxLength="1000"
                  v-model="record[col]"
                />
              </div>
            </template>
            <template
              slot="action"
              slot-scope="text, record"
            >
              <a @click="handleOperation('detail', record)">查看</a>
              <a-divider type="vertical" />
              <approval-button
                :id="record.taskDetailId"
                text='审批信息'
                :status="record.status + ''"
              />
            </template>
            <template
              slot="status"
              slot-scope="text, record"
            >
              <list-status
                :status="record.status"
                conversion="en"
                :is-approval="true"
                :text="text"
              />
            </template>
          </a-table>
          <div class="page-btn-right-top">
            <a-button
              v-if="resolveInfo"
              @click="$close"
            >
              关闭
            </a-button>
            <template v-else>
              <a-button
                @click="$close"
              >
                关闭
              </a-button>
              <a-button
                class="ml20"
                :loading="loading"
                type="primary"
                @click="sumbit(1)"
              > 审批不通过 </a-button>
              <a-button
                class="ml20"
                :loading="loading"
                type="primary"
                @click="sumbit(2)"
              > 审批通过 </a-button>
            </template>
          </div>
        </a-card>
        <a-card
          :bordered="false"
          v-if="form.approvedList.length"
        >
          <title-name title="已审批表单"></title-name>
          <a-table
            :pagination="false"
            :columns="columns"
            :data-source="form.approvedList"
            :scroll="{ x: 2000 }"
          >
            <span
              slot="serial"
              slot-scope="text, record, index"
            >{{ index + 1 }}</span>
            <template slot="approvalOpinion" slot-scope="text, record, index">
              {{record.approvalOpinion}}
            </template>
            <template
              slot="action"
              slot-scope="text, record"
            >
              <a @click="handleOperation('detail', record)">查看</a>
              <a-divider type="vertical" />
              <approval-button
                :id="record.taskDetailId"
                text='审批信息'
                :status="record.status + ''"
              />
            </template>
            <template
              slot="status"
              slot-scope="text, record"
            >
              <list-status
                :status="record.status"
                conversion="en"
                :is-approval="true"
                :text="text"
              />
            </template>
          </a-table>
        </a-card>
      </a-spin>
    </a-form-model>
    </div>
  <!-- </base-breadcrumb> -->
</template>
<script>
import { pageName } from '../projectManagementPlanningComponents/components/model.js'
import { queryBusinessBacklogById, projectPlanCompleteTask, updateByPrimaryKeySelective } from '@/api/projectManagementPlanning/approvalDetail'
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import moment from 'moment'
import Vue from 'vue'
const columns = [
  { title: '序号', dataIndex: 'serial', width: 65, scopedSlots: { customRender: 'serial' }, align: 'center' },
  { title: '策划项目', dataIndex: 'planProject', align: 'center', scopedSlots: { customRender: 'planProject' }, width: '200px' },
  { title: '提交人', dataIndex: 'submitterName', align: 'center', scopedSlots: { customRender: 'submitterName' }, width: '220px' },
  { title: '提交时间', dataIndex: 'submissionTime', scopedSlots: { customRender: 'submissionTime' }, width: '150px' },
  { title: '状态', dataIndex: 'statusName', scopedSlots: { customRender: 'statusName' }, width: '120px' },
  { title: '审批意见', dataIndex: 'approvalOpinion', scopedSlots: { customRender: 'approvalOpinion' }, width: '300px' },
  { title: '操作', dataIndex: 'action', width: '200px', align: 'center', fixed: 'right', scopedSlots: { customRender: 'action' } }
]
export default {
  name: 'approvalDetail' + Date.now(),
  extends: new BaseEditPage(),
  data() {
    return {
      columns,
      loading: false,
      currentTime: '', //当前审批时间
      selectedRowKeys: [],
      selectedRowData: [], //选中的值
      noSelectedRowData: [], //未选中的值
      form: {
        approvalPendingList: [],
        approvedList: []
      }
    }
  },
  props: {
    // 是否作为审批详情
    isAudit: {
      type: Boolean,
      default: false
    }
  },
  components: {},

  computed: {
    // 是否是业务待办查看处理信息
    resolveInfo: {
      get() {
        return this.$route.query?.resolveInfo === 'true'
      },
      set() {}
    }
  },

  created() {
    this.currentTime = moment().format('YYYY-MM-DD HH:mm')
    this.getDetailData()
    document.title = '中建八局'
  },

  methods: {
    getDetailData() {
      // 不为添加时请求详情
      if (this.id) {
        this.loading = true
        queryBusinessBacklogById({ id: this.id })
          .then((res) => {
            this.loading = false
            this.form = { ...this.form, ...res.data }
            this.$nextTick(() => {
              this.init = true
            })
          })
          .catch(() => {
            this.loading = false
          })
      } else {
        this.$nextTick(() => {
          this.init = true
        })
      }
    },
    onSelectChange(selectedRowKeys, row) {
      this.form.approvalPendingList.map((item) => (item.selectFlag = null))
      this.selectedRowKeys = selectedRowKeys
      this.selectedRowData = row
      row.map((item) => {
        item.selectFlag = true
      })
    },
    handleOperation(pageType, record) {
      const { taskDetailId, planCode, taskId } = record
      if (planCode * 1 === 1) {
        this.$router.push({
          name: 'ProjectPlanningTaskListDetail', //项目策划任务表特殊处理
          query: {
            id: taskId,
            pageType: 'look',
            editModel: true
          }
        })
      } else {
        this.$router.push({
          path: '/project/projectManagementPlanning/projectManagementPlanningComponents',
          query: {
            id: taskDetailId,
            pageType,
            editModel: pageType == 'detail' ? 0 : 1,
            pageName: pageName[planCode - 1]
          }
        })
      }
    },
    sure(str) {
      let that = this
      let selectedRowKeysLength = this.selectedRowKeys.length,
        residueLength = this.form.approvalPendingList.length - selectedRowKeysLength
      this.$confirm({
        okText: '确认',
        okType: 'warning',
        cancelText: '取消',
        title: '提交?',
        content: `已勾选${selectedRowKeysLength}个表单，请确认是否将勾选的${selectedRowKeysLength}个表单审批${str * 1 === 2 ? '' : '不'}通过，其余${residueLength}个表单审批${str * 1 === 2 ? '不' : ''}通过?`,
        onOk() {
          that.sureSumbit(str)
        },
        onCancel() {}
      })
    },
    async sureSumbit(str) {
      const reqData = []
      this.form.approvalPendingList.map((item, index) => {
        let falg = null
        if (str * 1 === 1) {
          falg = item.selectFlag ? true : false //通过false，拒绝true
        } else {
          falg = item.selectFlag ? false : true
        }
        reqData.push({
          formData: {
            opinions: item.approvalOpinion,
            reject: falg
          },
          procInstId: item.taskDetailId,
          userId: Vue.getAcloudProvider().getUserInfo().id
        })
        if (falg) {
          reqData[index]['variables'] = { reject: true, opinions: item.approvalOpinion }
        }
      })
      this.loading = true
      let data = await projectPlanCompleteTask(reqData)
      if (data?.data.code === 200) {
        this.$message.success(`处理成功！`)
        this.updateByPrimaryKeySelectiveFn()
      }
      this.loading = false
    },
    async updateByPrimaryKeySelectiveFn() {
      let req = {
        id: this.messageId,
        status: 1
      }
      let data = await updateByPrimaryKeySelective(req)
      this.$close()
    },
    sumbit(str) {
      let selectedRowKeysLength = this.selectedRowKeys.length,
        approvalPendingList = this.form.approvalPendingList,
        setCheckArr = [], //必填项集合
        setCheckFlag = false
      if (!selectedRowKeysLength) {
        this.$message.warning('请至少选择一个表单')
        return
      }
      let flag = approvalPendingList.every((item) => item.selectFlag) //flag 为真是全选
      if (str * 1 === 2 && flag) {
        this.sure(str)
        //全选加点击通过情况不校验
      } else {
        setCheckArr = []
        if (str * 1 === 1) {
          //审批不通过
          approvalPendingList.map((item, index) => {
            if (item.selectFlag) {
              this.$set(approvalPendingList[index], 'setCheck', true)
              setCheckArr.push(item)
            } else {
              this.$set(approvalPendingList[index], 'setCheck', false)
            }
          })
        } else {
          //审批通过
          approvalPendingList.map((item, index) => {
            if (!item.selectFlag) {
              this.$set(approvalPendingList[index], 'setCheck', true)
              setCheckArr.push(item)
            } else {
              this.$set(approvalPendingList[index], 'setCheck', false)
            }
          })
        }
        // 输入完成
        setCheckFlag = setCheckArr.every((item) => item.approvalOpinion)
        if (!setCheckFlag) {
          this.$message.warning('请输入拒绝审批项的审批意见')
          return
        } else {
          this.sure(str)
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.tool-btns {
  margin-top: 20px;
}
@{deep} .setCheck {
  .ant-input {
    border-color: #e4ac0b;
    background-color: #fff9e8;
  }
}
</style>
